<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>历史查询</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a href="#/telemetryCurveQuery" style="cursor: pointer; color: #fff"
          >遥测曲线查询</a
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="flex1">
      <div class="left">
        <el-radio-group v-model="radio1">
          <el-radio-button label="通讯树"></el-radio-button>
          <el-radio-button label="维度树"></el-radio-button>
        </el-radio-group>
        <div style="padding: 10px" class="flex">
          <el-input
            v-model="filterText"
            placeholder="请输入关键字检索"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
          ></el-button>
        </div>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
          highlight-current
        >
        </el-tree>
      </div>
      <div class="right">
        <el-radio-group v-model="radio2">
          <el-radio-button label="温度"></el-radio-button>
          <el-radio-button label="负荷率"></el-radio-button>
          <el-radio-button label="电流负载率"></el-radio-button>
          <el-radio-button label="功率负载率"></el-radio-button>
        </el-radio-group>
        <div class="select">
          <span>数据间隔：</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span style="margin-left: 10px">时间：</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <span style="margin-left: 10px">数据类型：</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            style="margin-left: 10px"
            >查询</el-button
          >
        </div>
        <div>
          <div id="main" style="height: 400px; width: 100%"></div>
        </div>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%"
            cell-style="color:#fff"
            header-cell-style="color:#fff;background:rgb(27, 79, 133)"
          >
            <el-table-column prop="1" label="测量量名称"> </el-table-column>
            <el-table-column label="最大值">
              <el-table-column prop="2" label="数值"> </el-table-column>
              <el-table-column prop="3" label="时间点"> </el-table-column>
            </el-table-column>
            <el-table-column label="最小值">
              <el-table-column prop="4" label="数值"> </el-table-column>
              <el-table-column prop="5" label="时间点"> </el-table-column>
            </el-table-column>
            <el-table-column prop="6" label="2022-01"> </el-table-column>
            <el-table-column prop="7" label="2022-02"> </el-table-column>
            <el-table-column prop="8" label="2022-03"> </el-table-column>
            <el-table-column prop="9" label="2022-04"> </el-table-column>
            <el-table-column prop="10" label="2022-05"> </el-table-column>
            <el-table-column prop="11" label="2022-06"> </el-table-column>
            <el-table-column prop="12" label="2022-07"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio1: "通讯树",
      radio2: "温度",
      filterText: "",
      data: [
        {
          id: 1,
          label: "全部",
          children: [
            {
              id: 4,
              label: "食堂电房电表及水表",
              children: [
                {
                  id: 9,
                  label: "食堂电房5A1",
                },
                {
                  id: 10,
                  label: "食堂电房5A2",
                },
                {
                  id: 11,
                  label: "食堂电房5A3",
                },
                {
                  id: 12,
                  label: "食堂电房5A4",
                },
                {
                  id: 13,
                  label: "食堂电房5A5",
                },
                {
                  id: 14,
                  label: "食堂电房5A6",
                },
                {
                  id: 15,
                  label: "食堂电房5A7",
                },
                {
                  id: 16,
                  label: "食堂电房5A8",
                },
                {
                  id: 17,
                  label: "食堂电房5A9",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      value1: "",
      tableData: [
        {
          1: "A相温度",
          2: 42.5,
          3: "2022-04-01 00:00:00",
          4: 30.1,
          5: "2022-09-01 00:00:00",
          6: 1,
          7: 2,
          8: 3,
          9: 4,
          10: 5,
          11: 6,
          12: 7,
        },
        {
          1: "B相温度",
          2: 42.5,
          3: "2022-04-01 00:00:00",
          4: 30.1,
          5: "2022-09-01 00:00:00",
          6: 1,
          7: 2,
          8: 3,
          9: 4,
          10: 5,
          11: 6,
          12: 7,
        },
      ],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = (option = {
        title: {
          text: "食堂电房_5A1变压器温控仪",
          left: "center",
          top: "1%",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["A相温度", "B相温度", "C相温度", "温度"],
          top: "1%",
          left: "right",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "2022-01",
            "2022-02",
            "2022-03",
            "2022-04",
            "2022-05",
            "2022-06",
            "2022-07",
          ],
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "A相温度",
            data: [1, 2, 3, 4, 5, 6, 7],
            type: "line",
            smooth: true,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "7",
                },
              ],
            },
            stack: "Total",
          },
          {
            name: "B相温度",
            data: [8, 9, 10, 11, 12, 13, 14],
            type: "line",
            smooth: true,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "14",
                },
              ],
            },
            stack: "Total",
          },
          {
            name: "C相温度",
            data: [15, 20, 25, 30, 35, 40, 45],
            type: "line",
            smooth: true,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "45",
                },
              ],
            },
            stack: "Total",
          },
          {
            name: "温度",
            data: [20, 30, 40, 50, 60, 70, 80],
            type: "line",
            smooth: true,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "80",
                },
              ],
            },
            stack: "Total",
          },
        ],
      });
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initCharts();
  },
};
</script>

<style scoped>
.left {
  width: 20vw;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
  margin: 20px 0;
}

.right {
  width: 80vw;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
  margin: 20px 0;
}

.select {
  margin: 20px;
}

.el-select {
  width: 120px !important;
  /* border: 1px solid #fff !important; */
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  height: 30px !important;
  background: none;
  color: #fff;
  /* border: 1px solid #fff; */
  border-radius: 0px;
  align-items: center;
  /* text-align: center; */
}

::v-deep .el-input__icon {
  line-height: 0px !important;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep.el-pagination__total {
  color: #fff;
}

::v-deep .el-radio-button__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0px;
  border-left: none;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: transparent;
  color: #fff;
}

::v-deep .el-tree-node > .el-tree-node__content:hover {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #fff;
  background: rgb(27, 79, 133) !important;
}

::v-deep .el-date-editor .el-range-input {
  background: transparent;
  color: #fff;
}
</style>